<template>
  <div class="ticket-booking-container">
    <!-- 头部导航 -->
    <div class="header-nav">
      <div class="header-left">
        <img src="./logo.png" alt="中国铁路12306" class="logo">
        <div class="search-box">
          <input type="text" placeholder="车票、餐饮、常旅客、相关规章" class="search-input">
          <button type="button" class="search-button">
            <i class="el-icon-search search-icon"></i>
          </button>
        </div>
      </div>
      <div class="header-right">
        <span class="nav-item">无障碍</span>
        <span class="divider">|</span>
        <span class="nav-item">敬老版</span>
        <span class="divider">|</span>
        <span class="nav-item">English</span>
        <span class="divider">|</span>
        <span class="nav-item">我的12306</span>
        <span class="divider">|</span>
        <router-link to="/login" class="nav-item">登录注册</router-link>
      </div>
    </div>
    
    <!-- 主导航栏 -->
    <div class="sub-nav">
      <div class="sub-nav-wrapper">
        <router-link to="/" class="sub-nav-item" :class="{ active: $route.path === '/' }">首页</router-link>
        
        <!-- 车票导航项 - 添加相对定位和下拉菜单 -->
        <div class="sub-nav-item-wrapper" @mouseenter="showTicketsMenu = true" @mouseleave="showTicketsMenu = false">
          <router-link to="/tickets" class="sub-nav-item" :class="{ active: $route.path === '/tickets' }">车票</router-link>
          
          <!-- 下拉菜单 -->
          <div v-show="showTicketsMenu" class="ticket-dropdown-menu">
            <div class="dropdown-section">
              <div class="section-title">购买</div>
              <div class="section-items">
                <router-link to="/one-way" class="section-item">单程</router-link>
                <router-link to="/round-trip" class="section-item">往返</router-link>
                <a href="#">中转换乘</a>
                <a href="#">计次•定期票</a>
              </div>
            </div>
            
            <div class="dropdown-divider"></div>
            
            <div class="dropdown-section">
              <div class="section-title">变更</div>
              <div class="section-items">
                <a href="#">退票</a>
                <a href="#">改签</a>
                <a href="#">变更到站</a>
              </div>
            </div>
            
            <div class="dropdown-divider"></div>
            
            <div class="dropdown-section">
              <div class="section-title">更多</div>
              <div class="section-items">
                <a href="#">中铁银通卡</a>
                <a href="#">广九直通</a>
              </div>
            </div>
          </div>
        </div>
        
        <router-link to="/group" class="sub-nav-item" :class="{ active: $route.path === '/group' }">团购服务</router-link>
        <router-link to="/membership" class="sub-nav-item" :class="{ active: $route.path === '/membership' }">会员服务</router-link>
        <router-link to="/station" class="sub-nav-item" :class="{ active: $route.path === '/station' }">站车服务</router-link>
        <router-link to="/business" class="sub-nav-item" :class="{ active: $route.path === '/business' }">商旅服务</router-link>
        <router-link to="/guide" class="sub-nav-item" :class="{ active: $route.path === '/guide' }">出行指南</router-link>
        <router-link to="/query" class="sub-nav-item" :class="{ active: $route.path === '/query' }">信息查询</router-link>
      </div>
    </div>
    
    <!-- 购票类型选择 -->
    <div class="ticket-type-tabs">
      <button class="tab active">单程</button>
      <button class="tab">往返</button>
    </div>
    
    <!-- 基本信息表单 -->
    <div class="booking-form">
    <div class="form-content">
      <div class="form-left">
      <div class="form-group">
        <label>出发地</label>
        <div class="input-wrapper">
          <input type="text" placeholder="简拼/全拼/汉字">
          <button class="location-btn"><i class="fa fa-map-marker"></i></button>
        </div>
      </div>
      
      <div class="form-group">
        <label>目的地</label>
        <div class="input-wrapper">
          <input type="text" placeholder="简拼/全拼/汉字">
          <button class="location-btn"><i class="fa fa-map-marker"></i></button>
        </div>
      </div>
      
      <div class="form-group date-group">
        <label>出发日</label>
        <input type="date" value="2025-05-14">
      </div>
      
      <div class="form-group date-group">
        <label>返程日</label>
        <input type="date" value="2025-05-14">
      </div>
      
      <div class="passenger-type">
        <label>票种类型：</label>
        <span class="passenger-option active">普通</span>
        <span class="passenger-option">学生</span>
      </div>
      <button class="search-btn">查询</button>
    </div>
    <div class="form-right">
        <img src="./4.png" alt="添加的图片" class="form-image">
      </div>
      </div>
      </div>
    
    <!-- 日期选择条 -->
    <div class="date-selector">
      <button class="prev-day"><i class="fa fa-angle-left"></i></button>
      <div class="date-items">
        <div class="date-item active">
          <div class="day">05-14</div>
          <div class="week">周三</div>
        </div>
        <div class="date-item">
          <div class="day">05-15</div>
          <div class="week">周四</div>
        </div>
        <div class="date-item">
          <div class="day">05-16</div>
          <div class="week">周五</div>
        </div>
        <div class="date-item">
          <div class="day">05-17</div>
          <div class="week">周六</div>
        </div>
        <div class="date-item">
          <div class="day">05-18</div>
          <div class="week">周日</div>
        </div>
        <div class="date-item">
          <div class="day">05-19</div>
          <div class="week">周一</div>
        </div>
        <div class="date-item">
          <div class="day">05-20</div>
          <div class="week">周二</div>
        </div>
        <div class="date-item">
          <div class="day">05-21</div>
          <div class="week">周三</div>
        </div>
        <div class="date-item">
          <div class="day">05-22</div>
          <div class="week">周四</div>
        </div>
        <div class="date-item">
          <div class="day">05-23</div>
          <div class="week">周五</div>
        </div>
        <div class="date-item">
          <div class="day">05-24</div>
          <div class="week">周六</div>
        </div>
        <div class="date-item">
          <div class="day">05-25</div>
          <div class="week">周日</div>
        </div>
        <div class="date-item">
          <div class="day">05-26</div>
          <div class="week">周一</div>
        </div>
        <div class="date-item">
          <div class="day">05-27</div>
          <div class="week">周二</div>
        </div>
        <div class="date-item">
          <div class="day">05-28</div>
          <div class="week">周三</div>
        </div>
      </div>
      <button class="next-day"><i class="fa fa-angle-right"></i></button>
    </div>
    
    <!-- 筛选条件 -->
    <div class="filter-options">
      <div class="filter-group">
        <label>发车时间：</label>
        <select>
          <option>00:00--24:00</option>
          <option>00:00--06:00</option>
          <option>06:00--12:00</option>
          <option>12:00--18:00</option>
          <option>18:00--24:00</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label>车次类型：</label>
        <div class="checkbox-group">
          <label><input type="checkbox" checked>全部</label>
          <label><input type="checkbox" checked>GC-高铁/城际</label>
          <label><input type="checkbox" checked>D-动车</label>
          <label><input type="checkbox" checked>Z-直达</label>
          <label><input type="checkbox" checked>T-特快</label>
          <label><input type="checkbox" checked>K-快速</label>
          <label><input type="checkbox" checked>其他</label>
          <label><input type="checkbox">复兴号智能动车组</label>
        </div>
      </div>
      
      <div class="filter-group">
        <label>出发车站：</label>
        <select>
          <option>全部</option>
          <!-- 更多车站选项 -->
        </select>
      </div>
      
      <div class="filter-group">
        <label>到达车站：</label>
        <select>
          <option>全部</option>
          <!-- 更多车站选项 -->
        </select>
      </div>
      
      <div class="filter-group">
        <label>车次席别：</label>
        <select>
          <option>全部</option>
          <!-- 更多席别选项 -->
        </select>
      </div>
      
      <button class="filter-btn">筛选</button>
    </div>
    
    <!-- 附加筛选选项 -->
    <div class="additional-filters">
      <label><input type="checkbox">显示折扣车次</label>
      <label><input type="checkbox">显示积分兑换车次</label>
      <label><input type="checkbox">显示全部可预订车次</label>
    </div>
    
    <!-- 车次列表 -->
    <div class="train-list">
      <table class="train-table">
        <thead>
          <tr>
            <th>车次</th>
            <th>出发/到达站</th>
            <th>出发/到达时间</th>
            <th>历时</th>
            <th>商务座</th>
            <th>特等座</th>
            <th>优选一等座</th>
            <th>一等座</th>
            <th>二等座</th>
            <th>二等包座</th>
            <th>高级软卧</th>
            <th>软卧/动卧</th>
            <th>一等卧</th>
            <th>硬卧</th>
            <th>二等卧</th>
            <th>软座</th>
            <th>硬座</th>
            <th>无座</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <!-- 这里会动态生成车次数据 -->
          <tr class="train-item">
            <td class="train-number">G101</td>
            <td>
              <div class="station-info">
                <div class="departure-station">北京南</div>
                <div class="arrival-station">上海虹桥</div>
              </div>
            </td>
            <td>
              <div class="time-info">
                <div class="departure-time">08:00</div>
                <div class="arrival-time">12:23</div>
              </div>
            </td>
            <td class="duration">4小时23分</td>
            <td class="seat-type">
              <div class="seat-price">¥1748.5</div>
              <div class="seat-available">有</div>
            </td>
            <td class="seat-type">
              <div class="seat-price">¥933.5</div>
              <div class="seat-available">有</div>
            </td>
            <td class="seat-type">
              <div class="seat-price">¥862.5</div>
              <div class="seat-available">有</div>
            </td>
            <td class="seat-type">
              <div class="seat-price">¥553.5</div>
              <div class="seat-available">有</div>
            </td>
            <td class="seat-type">
              <div class="seat-price">¥343.5</div>
              <div class="seat-available">有</div>
            </td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">-</td>
            <td class="seat-type">
              <button class="book-btn">预订</button>
            </td>
          </tr>
          
          <!-- 更多车次 -->
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// 控制车票下拉菜单显示/隐藏
const showTicketsMenu = ref(false);
</script>

<style scoped>
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo {
  height: 40px;
  margin-right: 20px;
  object-fit: contain;
}

.search-box {
  position: relative;
  width: 300px;
}

.search-input {
  width: 100%;
  height: 36px;
  padding: 0 40px 0 15px;
  border: 1px solid #ddd;
  border-radius: 18px;
}

.search-button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icon {
  font-size: 16px;
  color: #666;
}

.search-button:hover .search-icon {
  color: #007bff;
}

.header-right {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.nav-item {
  margin: 0 10px;
  cursor: pointer;
}

.divider {
  color: #ddd;
}

.sub-nav {
  background-color: #003366;
  color: white;
  height: 56px;
}

.sub-nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-around;
}

.sub-nav-item {
  color: white;
  text-decoration: none;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.sub-nav-item {
  color: white;
  text-decoration: none;
  padding: 0 18px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
  font-size: 16px;
  letter-spacing: 1px;
}

.sub-nav-item:hover,
.sub-nav-item.active {
  background-color: #005599;
  font-weight: 500;
}

/* 车票下拉菜单样式 */
.sub-nav-item-wrapper {
  position: relative;
  height: 100%;
}

.ticket-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 500px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 15px;
  display: flex;
  z-index: 20;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.dropdown-section {
  flex: 1;
  padding: 0 10px;
}

.section-title {
  font-weight: 500;
  color: #003366;
  margin-bottom: 8px;
}

.section-items {
  display: flex;
  flex-wrap: wrap;
}

.section-items a {
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
  margin-right: 10px;
  margin-bottom: 5px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

.section-items a:hover {
  background-color: #f0f0f0;
  color: #003366;
}

.dropdown-divider {
  width: 1px;
  background-color: #ddd;
  margin: 0 5px;
}

.ticket-booking-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.ticket-type-tabs {
  display: flex;
  margin-bottom: 20px;
}

.tab {
  padding: 10px 20px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin-right: 5px;
  border-radius: 4px 4px 0 0;
}

.tab.active {
  background-color: #003366;
  color: white;
}


.booking-form {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex; /* 使用 flex 布局 */
  flex-wrap: wrap; /* 允许子元素换行 */
}

.form-content {
  display: flex;
  width: 100%;
}

.form-left {
  flex: 1; /* 让左边部分自动填充剩余空间 */
  margin-right: px; /* 与右边部分留出一些间距 */
}

.form-right {
  flex: 1; /* 让右边部分自动填充剩余空间 */
  display: flex;
  justify-content: center; /* 水平居中图片 */
  align-items: center; /* 垂直居中图片 */
}

.form-image {
  max-width: 100%; /* 图片最大宽度为父元素宽度 */
  max-height: 100%; /* 图片最大高度为父元素高度 */
  object-fit: contain; /* 保持图片比例并完整显示 */
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  width: 250px;
}

.input-wrapper input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.location-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
}

.date-group {
  display: inline-block;
  margin-right: 20px;
}

.date-group input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.passenger-type {
  margin-top: 15px;
  margin-bottom: 20px;
}

.passenger-option {
  display: inline-block;
  padding: 5px 10px;
  margin-right: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.passenger-option.active {
  background-color: #003366;
  color: white;
  border-color: #003366;
}

.search-btn {
  background-color: #e84118;
  color: white;
  padding: 10px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
}

.date-selector {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  overflow-x: auto;
}

.prev-day, .next-day {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  width: 30px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
}

.date-items {
  display: flex;
  flex: 1;
  margin: 0 10px;
}

.date-item {
  min-width: 60px;
  text-align: center;
  padding: 10px 5px;
  border: 1px solid #ddd;
  margin-right: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.date-item.active {
  background-color: #003366;
  color: white;
  border-color: #003366;
}

.day {
  font-size: 14px;
  font-weight: 500;
}

.week {
  font-size: 12px;
  color: #666;
}

.date-item.active .week {
  color: white;
}

.filter-options {
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.filter-group {
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 20px;
}

.filter-group label {
  margin-right: 5px;
  font-weight: 500;
}

.filter-group select {
  padding: 6px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.checkbox-group {
  display: inline-block;
}

.checkbox-group label {
  margin-right: 15px;
  font-weight: normal;
}

.filter-btn {
  background-color: #003366;
  color: white;
  padding: 6px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.additional-filters {
  margin-bottom: 15px;
}

.additional-filters label {
  margin-right: 20px;
}

.train-list {
  overflow-x: auto;
}

.train-table {
  width: 100%;
  border-collapse: collapse;
}

.train-table th, .train-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.train-table th {
  background-color: #f0f0f0;
  font-weight: 500;
}

.train-item:hover {
  background-color: #f9f9f9;
}

.train-number {
  font-weight: 500;
  color: #003366;
}

.station-info .departure-station {
  font-weight: 500;
}

.station-info .arrival-station {
  color: #666;
}

.time-info .departure-time {
  font-weight: 500;
}

.time-info .arrival-time {
  color: #666;
}

.duration {
  color: #666;
}

.seat-type {
  padding: 5px;
}

.seat-price {
  font-weight: 500;
  color: #e84118;
}

.seat-available {
  color: #27ae60;
  font-size: 12px;
}

.book-btn {
  background-color: #e84118;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>  